import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Tabs, List, Badge } from 'antd-mobile';
const Item = List.Item
const Brief = Item.Brief

import Header from "../components/header";

import {loadUserMessage} from "../redux/actions/userAction"
import {getSiteInfo,getWinningList} from "../redux/actions/indexAction"

class userMessageContainer extends Component {
  constructor (props){
   super(props)
   this.state= {
    tabs2:[
        { title: '公告', sub: '1' , dec:'W'},
        { title: '中奖名单', sub: '2' ,dec:"Q"},
        { title: '站内信', sub: '3' ,dec:"B"}
      ],
      gonggaoisShow:[],
      winninglistisShow:[],
      messageisShow:[]
   }
}
    show(isShow,index){
      // const isShow = this.state[name]
      // debugger
      var num = isShow.indexOf(index)
      num< 0 ? isShow.push(index) : isShow.splice(num,1)
      this.setState({
        isShow
      })
    }
    componentDidMount(){
      const {dispatch} = this.props
      dispatch(getSiteInfo())
      dispatch(getWinningList())
      let readStatus = "" //1:已读 0：未读 空：查所有
      let pageNo = 1;
      let pageSize = 10;
      dispatch(loadUserMessage(readStatus,pageNo,pageSize))
    }


   render() {
    const {user,Index} = this.props
    // console.log(Index.get("systemMessages"),"gonggao")
    let gonggao = Index.get("systemMessages")
      return <div className="awarditem">
          <Header title="会员消息" {...this.props}></Header>
          <div className="container">
          
          <Tabs tabs={this.state.tabs2}
            initialPage={0}
            onChange={(tab, index) => {  }}
          >
      <div style={{ backgroundColor: '#fff' }}>
      <List className="my-list">
            {
             gonggao.map((item, index)=>{
                return <div className={this.state.gonggaoisShow.indexOf(index)>-1? "recorditem downarrow" : "recorditem"}  key={index}>
                <Item 
                arrow="horizontal"
                multipleLine
                onClick={() => {
                  this.show(this.state.gonggaoisShow,index)
                }}
              > <div className="title"><h3>{item.ggName}</h3></div> <Brief>{item.ggContent}</Brief>
               </Item>
               <div className={this.state.gonggaoisShow.indexOf(index)>-1? "msgcontent" : "msgcontent hidden"}>
                  {item.ggContent}
              </div>
              </div>
              })
            }

          </List>
      </div>
      
      <div style={{backgroundColor: '#fff'}}>
      <List className="my-list">
            {
             Index.get("winningList") && Index.get("winningList").map((item, index)=>{
                return  <Item 
                key={index}
                multipleLine
                onClick={() => {
                  
                }}
              > <div className="title"><h3>{item.gameName}</h3> <span>{item.itemName}</span></div> 
               <Brief>{item.remark}</Brief>
               </Item>
               
              })
            }


          </List>
      </div>
      

      <div style={{backgroundColor: '#fff'}}>
      <List className="my-list">
            {
             user.get("message") &&  user.get("message").map((item, index)=>{
                return <div className={this.state.messageisShow.indexOf(index)>-1? "recorditem downarrow" : "recorditem"}  key={index}>
                <Item 
                key={index}
                arrow="horizontal"
                multipleLine
                onClick={() => {
                  this.show(this.state.messageisShow,index)
                }}
              > <div className="title"><h3>{item.msgTitle}</h3> <span>{item.createTime}</span> </div> 
              <Brief>{item.msgContent}</Brief>
               </Item>
               <div className={this.state.messageisShow.indexOf(index)>-1? "msgcontent" : "msgcontent hidden"}>
                  {item.msgContent}
              </div>
              </div>
              })
            }
          </List>
      </div>
    </Tabs>

       
    </div>

      </div>
   } 


}

function mapStateToProps(state) {
  return {
    Index:state.Index,
    user: state.user
  }
}

export default connect(mapStateToProps)(userMessageContainer)